<template>
  <div class="Control">
    <el-header class="wrap_Top">
      <el-row :gutter="24">
        <el-col :span="24">
          <div class="grid-content title">
            <h1>控制</h1>
          </div>
        </el-col>
      </el-row>
    </el-header>
    <el-scrollbar style="height: 100%;" class="scoller">
      <el-main>
        <section class="cloudset">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span class="title">云端设定值</span>
            </div>
            <div class="text item">
              <div class="wrap_item">
                <span class="name_item">设定液位</span>
                <span class="value_item">0</span>
              </div>
              <div class="wrap_item">
                <span class="name_item">热泵设定</span>
                <span class="value_item">0</span>
              </div>
              <div class="wrap_item">
                <span class="name_item">电热辅热</span>
                <span class="value_item">0</span>
              </div>
            </div>
            <div class="text item">
              <div class="number_item">
                <el-input-number
                  v-model="num1"
                  controls-position="right"
                  @change="handleChange"
                  :min="1"
                  :max="10"
                ></el-input-number>
              </div>
              <div class="number_item">
                <el-input-number
                  v-model="num2"
                  controls-position="right"
                  @change="handleChange1"
                  :min="1"
                  :max="10"
                ></el-input-number>
              </div>
              <div class="number_item">
                <el-input-number
                  v-model="num3"
                  controls-position="right"
                  @change="handleChange2"
                  :min="1"
                  :max="10"
                ></el-input-number>
              </div>
            </div>
          </el-card>
        </section>
        <section class="controlset">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span class="title">云端联动控制</span>
            </div>
            <div class="text item">
              <div class="wrap_item">
                <span class="name_item">远程补水开关</span>
                <el-switch class="switch_item" v-model="value1"></el-switch>
              </div>
              <div class="wrap_item">
                <span class="name_item">远程供水开关</span>
                <el-switch class="switch_item" v-model="value1"></el-switch>
              </div>
              <div class="wrap_item">
                <span class="name_item">远程热泵开关1</span>
                <el-switch class="switch_item" v-model="value1"></el-switch>
              </div>
            </div>
            <div class="text item">
              <div class="wrap_item">
                <span class="name_item">远程热泵开关2</span>
                <el-switch class="switch_item" v-model="value1"></el-switch>
              </div>
              <div class="wrap_item">
                <span class="name_item">太阳能电磁阀开关</span>
                <el-switch class="switch_item" v-model="value1"></el-switch>
              </div>
            </div>
            <div class="text item">
              <div class="wrap_item">
                <span class="name_item">电辅热开关</span>
                <el-switch class="switch_item" v-model="value1"></el-switch>
              </div>
              <div class="wrap_item">
                <span class="name_item">太阳能补水开关</span>
                <el-switch class="switch_item" v-model="value1"></el-switch>
              </div>
            </div>
          </el-card>
        </section>
      </el-main>
    </el-scrollbar>
  </div>
</template>

<script src="../../assets/js/sixsubmg/control.js"></script>

<style scoped lang="scss">
.Control {
  > .el-header {
    .el-row {
      .el-col {
        .title {
          text-align: center;
          height: 36px;
          font-family: ".PingFang SC";
          font-size: 16x;
          color: #fff;
          line-height: 36px;
          line-height: 21px;
          font-weight: normal;
          white-space: pre-wrap;
        }
      }
    }
  }
  .scoller {
    .el-scrollbar__wrap {
      overflow-x: hidden;
    }
  }
  .el-main {
    height: 700px;
    padding: 20px 50px 50px 50px;
    > section {
      margin-top: 15px;
    }
    > .cloudset {
      .box-card {
        .el-card__header {
          .title {
            font-size: 24px;
            color: #000;
          }
        }
        .el-card__body {
          .text {
            display: flex;
            justify-content: space-between;
            .wrap_item {
              display: flex;
              flex-direction: column;
              border: 1px solid #000;
              border-radius: 10px;
              width: 15%;
              text-align: center;
              height: 70px;
              padding-top: 12px;
              .name_item {
                font-family: ".PingFang SC";
                font-weight: normal;
                font-size: 24px;
              }
              span.value_item {
                font-family: ".PingFang SC";
                font-size: 14px;
                font-weight: normal;
                color: rgb(0, 255, 0);
                line-height: 30px;
              }
            }
            .number_item {
              display: flex;
              flex-direction: row;
              margin-top: 20px;
            }
          }
        }
      }
    }
    > .controlset {
      .box-card {
        .el-card__header {
          .title {
            font-size: 24px;
            color: #000;
          }
        }
        .el-card__body {
          .text {
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
            .wrap_item {
              display: flex;
              flex-direction: column;
              border: 1px solid #000;
              border-radius: 10px;
              width: 15%;
              text-align: center;
              height: 110px;
              padding-top: 12px;
              .name_item {
                font-family: ".PingFang SC";
                font-weight: normal;
                font-size: 24px;
              }
              .switch_item {
                margin-left: 48px;
                margin-top: 22px;
              }
            }
          }
        }
      }
    }
  }
}
</style>
